<div class="portlet light bordered order-list-container" style="margin: 15px;">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject bold"> Item Group List </span>
        </div>
        <div class="actions">
            <a ui-sref="fd.item.itemGroup.add" style="line-height: 35px;"
               permission-check="{{'item::itemGroup_write'}}"><b>Add Item Group</b></a>
        </div>
    </div>
    <div class="portlet-body form form-horizontal">
        <div class="row form-group">
            <div class="col-md-6">
                <input type="text" ng-keyup="ctrl.search()" ng-model="groupName"
                       class="form-control" placeholder="Type to search" />
            </div>
        </div>
        <div ng-show="!ctrl.searchItempPropertyGroupCompleted" class="text-center">
            <img src="assets/img/loading-spinner-grey.gif"><span>&nbsp;LOADING...</span>
        </div>
        <div ng-show="ctrl.searchItempPropertyGroupCompleted" style="margin-top: 20px;">
            <div class="portlet light bordered" ng-repeat="ipg in ctrl.itemPropertyGroups track by $index">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa"></i>{{ipg.name}}
                    </div>
                    <div class="caption entry-status" style="padding-top:8px; padding-left: 20px;">
                        <span class="label" ng-class="{
                        'label-default': ctrl.groupsIsUsedMap[ipg.id],
                        'label-info': !ctrl.groupsIsUsedMap[ipg.id]
                        }">
                            <span ng-show="ctrl.groupsIsUsedMap[ipg.id]">Used</span>
                            <span ng-show="!ctrl.groupsIsUsedMap[ipg.id]">New</span>
                        </span>
                    </div>

                    <div class="tools"  permission-check="{{'item::itemGroup_write'}}">
                        <a ng-click="ctrl.editItemPropertyGroup(ipg.id)"> Edit </a>
                        <a href="javascript:;" ng-click="ctrl.removeItemPropertyGroup($index)"
                           ng-show="!ctrl.groupsIsUsedMap[ipg.id]"> | Delete</a>
                    </div>
                </div>
                <div class="portlet-body">
                    <ul class="feeds">
                        <li ng-repeat="p in ipg.parentGroupProperties" style="background-color:#f6f3e8; display:inline-block;margin: 5px 5px;padding: 5px 10px;border-radius: 3px;">
                            <span>{{p.itemProperty.name}}</span>
                            <i class="fa fa-sitemap" ng-show="p.isDiverse" style="margin-left:10px;"></i>
                            <i class="fa fa-key" ng-show="p.isKey" style="margin-left:10px;"></i>
                        </li>
                        <li ng-repeat="p in ipg.properties" style="background-color:#f6f3e8; display:inline-block;margin: 5px 5px;padding: 5px 10px;border-radius: 3px;">
                            <span>{{p.itemProperty.name}}</span>
                            <i class="fa fa-sitemap" ng-show="p.isDiverse" style="margin-left:10px;"></i>
                            <i class="fa fa-key" ng-show="p.isKey" style="margin-left:10px;"></i>
                        </li>
                    </ul>
                </div>
            </div>
            <pager total-count="ctrl.totalItemPropertyGroups.length" page-size="ctrl.pageSize" load-content="ctrl.loadContent(currentPage)"></pager>
        </div>
    </div>
</div>




